﻿var rows;
var cols;

var cMargin;
var cMarginTop;
var cMarginRight;

var cWidth;
var cHeight;
var cellSize;
var cellBorderSize;

var activeCellColor;
var activeCellBorderColor;
var activeCellBorderType;
var activeCellRoundType;

var defaultCellColor;
var defaultCellBorderColor;
var defaultCellBorderType;

var panelColorValue;
var panelBorderWidth;
var panelBorderColor;
var panelBorderType;

var btnClassSelected = '#FF0000';
var btnClassNoSelected = '#888888';

function kindOfBrowser() {
	var agt = navigator.userAgent.toLowerCase();
	if (agt.indexOf("chrome") != -1)
		return 'Chrome';
	else if (agt.indexOf("opera") != -1)
		return 'Opera';
	else if (agt.indexOf("firefox") != -1)
		return 'Firefox';
	else if (agt.indexOf("safari") != -1)
		return 'Safari';
	else if (agt.indexOf("skipstone") != -1)
		return 'SkipStone';
	else if (agt.indexOf("msie") != -1)
		return 'IE';
	else if (agt.indexOf("netscape") != -1)
		return 'Netscape';
	else if (agt.indexOf("mozilla/5.0") != -1)
		return 'Mozilla';
	// else if (agt.indexOf("staroffice") != -1)
	// return 'Star Office';
	// else if (agt.indexOf("webtv") != -1)
	// return 'WebTV';
	// else if (agt.indexOf("beonex") != -1)
	// return 'Beonex';
	// else if (agt.indexOf("chimera") != -1)
	// return 'Chimera';
	// else if (agt.indexOf("netpositive") != -1)
	// return 'NetPositive';
	// else if (agt.indexOf("phoenix") != -1)
	// return 'Phoenix';
	else
		return 'none';
}

// ============================================================ preveiw comment
var commentBtn = new Array();
// �迭�����Ӽ��� ����� xxx.yyy=zzz; ���� ���� �Է¶Ǵ� ����� xxx[yyy];
commentBtn.toggleBtn_cell_volume = "�� ���̺� ������ �����մϴ�.";
commentBtn.toggleBtn_cell_size = "���� ����� �����մϴ�.";
commentBtn.toggleBtn_cell_gapSize = "���鰣�� ���ݻ���� �����մϴ�.  ";
commentBtn.toggleBtn_cell_borderSize = "�׵θ� �β��� �����մϴ�.";

commentBtn.toggleBtn_aCell_bgColor = "���õ� ���� �������� �����մϴ�.";
commentBtn.toggleBtn_aCell_borderColor = "���õ� ���� �׵θ����� �����մϴ�..";
commentBtn.toggleBtn_aCell_borderType = "���õ� ���� �׵θ� Ÿ���� �����մϴ�.";

commentBtn.toggleBtn_iCell_bgColor = "���õ��� ���� ���� �������� �����մϴ�.";
commentBtn.toggleBtn_iCell_borderColor = "���õ��� ���� ���� �׵θ����� �����մϴ�..";
commentBtn.toggleBtn_iCell_borderType = "���õ��� ���� ���� �׵θ� Ÿ���� �����մϴ�.";

commentBtn.toggleBtn_panel_bgColor = "�г��� �������� �������� �����մϴ�.";
commentBtn.toggleBtn_panel_borderSize = "�г��� �׵θ� �β��� �����մϴ�.";
commentBtn.toggleBtn_panel_borderColor = "�г���  �׵θ����� �����մϴ�.";
commentBtn.toggleBtn_panel_borderType = "�г���  �׵θ� Ÿ���� �����մϴ�.";

// commentBtn.cellSize_16px = "������ : 16px�� �����մϴ�.";
// commentBtn.cellSize_20px = "������ : 20px�� �����մϴ�.";
// commentBtn.cellSize_24px = "������ : 24px�� �����մϴ�.";
// commentBtn.cellSize_32px = "������ : 24px�� �����մϴ�.";
// commentBtn.cellSize_48px = "������ : 48px�� �����մϴ�.";
//
// commentBtn.cellGapSize_0px = "";
// commentBtn.cellGapSize_1px = "";
// commentBtn.cellGapSize_2px = "";
// commentBtn.cellGapSize_4px = "";
// commentBtn.cellGapSize_8px = "";
//
// commentBtn.borderSize_1px = "";
// commentBtn.borderSize_2px = "";
// commentBtn.borderSize_4px = "";
// commentBtn.borderSize_8px = "";
//
// commentBtn.borderType_Dotted = "�гκ���Ÿ�� : dotted��";
// commentBtn.borderType_Dashed = "�гκ���Ÿ�� : dashed��";
// commentBtn.borderType_Double = "�гκ���Ÿ�� : double��";
// commentBtn.borderType_Inset = "�гκ���Ÿ�� : inset��";
// commentBtn.borderType_Outset = "�гκ���Ÿ�� : outset��";
// commentBtn.borderType_Groove = "�гκ���Ÿ�� : groove��";

// ============================================================================

var presentTable = 'volumeTable';
var stateToggle = 'cell_volume';

var workerPanel;
var hiddenPanel;
/* ���� ���õ� ��ư */

function addCol() {
	var uls = workerPanel.getElementsByTagName("ul");
	for (var i = 0; i < uls.length; i++) {
		var add_li = document.createElement("li");
		add_li.id = "cellNo_" + i + "_" + cols;
		add_li.className = 'inactiveCell';
		setCellInit(add_li);
		uls[i].appendChild(add_li);
	}

	var inputUL = document.getElementById("inputUL");
	var lis = inputUL.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {
		var add_input = document.createElement("input");
		add_input.id = "inputNo_" + i + "_" + cols;
		add_input.name = "inputNo_" + i + "_" + cols;
		add_input.className = 'inactiveCell';
		add_input.setAttribute("value", "0");
		setCellInit(add_input);
		lis[i].appendChild(add_input);
	}

	document.getElementById("colNum").value++;
	cols++;
}

function removeCol() {
	if (cols > 1) {
		var uls = workerPanel.getElementsByTagName("ul");
		for (var i = 0; i < uls.length; i++) {
			var lis = uls[i].getElementsByTagName("li");

			uls[i].removeChild(lis[lis.length - 1]);
		}

		var inputUL = document.getElementById("inputUL");
		var lis = inputUL.getElementsByTagName("li");
		for (var i = 0; i < lis.length; i++) {
			var inputs = lis[i].getElementsByTagName("input");
			lis[i].removeChild(inputs[inputs.length - 1]);
		}

		document.getElementById("colNum").value--;
		cols--;
	}
}

function addRow() {

	var lines = document.getElementById("colNum").value;

	var ul = document.createElement("ul");
	ul.id = "newLine" + rows;

	for (var i = 0; i < lines; i++) {
		var add_li = document.createElement("li");
		add_li.id = "cellNo_" + rows + "_" + i;
		setCellInit(add_li);
		ul.appendChild(add_li);
	}
	workerPanel.appendChild(ul);

	var li = document.createElement("li");
	for (var i = 0; i < lines; i++) {
		var add_input = document.createElement("input");
		add_input.id = "inputNo_" + rows + "_" + i;
		add_input.name = "inputNo_" + rows + "_" + i;
		add_input.setAttribute("value", "0");
		setCellInit(add_input);
		li.appendChild(add_input);
	}

	var inputUL = document.getElementById("inputUL");
	inputUL.appendChild(li);

	document.getElementById("rowNum").value++;
	rows++;
}

function removeRow() {
	if (rows > 1) {

		var uls = workerPanel.getElementsByTagName("ul");
		workerPanel.removeChild(uls[uls.length - 1]);

		var inputUL = document.getElementById("inputUL");
		var lis = inputUL.getElementsByTagName("li");
		inputUL.removeChild(lis[lis.length - 1]);

		document.getElementById("rowNum").value--;
		rows--;
	}
}

function getStyle() {

	rows = document.getElementById("rowNum").value;
	cols = document.getElementById("colNum").value;
	cWidth = document.getElementById("cellWidth").value;
	cHeight = document.getElementById("cellHeight").value;
	cMarginTop = document.getElementById("cMarginTop").value;
	cMarginRight = document.getElementById("cMarginRight").value;
	borderWidth_c = document.getElementById("borderWidth_c").value;

	activeCellColor = document.getElementById("colorPicker_acc").value;
	activeCellBorderColor = document.getElementById("colorPicker_acbc").value;
	activeCellBorderStyle = document.getElementById("borderStyle_a").value;
	activeCellRoundType = document.getElementById("roundStyle_a").value;

	defaultCellColor = document.getElementById("colorPicker_dcc").value;
	defaultCellBorderColor = document.getElementById("colorPicker_dcbc").value;
	defaultCellBorderStyle = document.getElementById("borderStyle_i").value;

	panelColorValue = document.getElementById("colorPicker_pc").value;
	panelBorderColor = document.getElementById("colorPicker_pbc").value;
	borderStyle_p = document.getElementById("borderStyle_p").value;
	borderWidth_p = document.getElementById("borderWidth_p").value;
}

function setStyle() {
	changeStyle('.activeCell', 'width', cWidth);
	changeStyle('.activeCell', 'height', cHeight);
	changeStyle('.activeCell', 'marginTop', cMarginTop);
	changeStyle('.activeCell', 'marginRight', cMarginRight);
	changeStyle('.activeCell', 'borderWidth', borderWidth_c);
	changeStyle('.activeCell', 'backgroundColor', activeCellColor);
	changeStyle('.activeCell', 'borderColor', activeCellBorderColor);
	changeStyle('.activeCell', 'borderStyle', activeCellBorderStyle);
	changeStyle('.activeCell', 'borderRadius', activeCellRoundType);

	changeStyle('.inactiveCell', 'width', cWidth);
	changeStyle('.inactiveCell', 'height', cHeight);
	changeStyle('.inactiveCell', 'marginTop', cMarginTop);
	changeStyle('.inactiveCell', 'marginRight', cMarginRight);
	changeStyle('.inactiveCell', 'borderWidth', borderWidth_c);
	changeStyle('.inactiveCell', 'backgroundColor', defaultCellColor);
	changeStyle('.inactiveCell', 'borderColor', defaultCellBorderColor);
	changeStyle('.inactiveCell', 'borderStyle', defaultCellBorderStyle);

	workerPanel.style.paddingBottom = cMarginTop;
	workerPanel.style.paddingLeft = cMarginRight;
	workerPanel.style.backgroundColor = panelColorValue;
	workerPanel.style.borderColor = panelBorderColor;
	workerPanel.style.borderStyle = borderStyle_p;
	workerPanel.style.borderWidth = borderWidth_p;

	// var inputUL = document.getElementById("inputUL");
	// inputUL.style.paddingBottom = cMarginTop;
	// inputUL.style.paddingLeft = cMarginRight;
	// inputUL.style.backgroundColor = panelColorValue;
	// inputUL.style.borderColor = panelBorderColor;
	// inputUL.style.borderStyle = borderStyle_p;
	// inputUL.style.borderWidth = borderWidth_p;
}

function setWorkerPanel() {

	var lis = workerPanel.getElementsByTagName("li");

	workerPanel.onmouseup = function() {
		mState = 0;
	};

	for (var j = 0; j < lis.length; j++) {
		setCellInit(lis[j]);
	}

	var inputUL = document.getElementById("inputUL");
	var inputs = inputUL.getElementsByTagName("input");
	for (var j = 0; j < inputs.length; j++) {
		setCellInit(inputs[j]);
	}
}

var cState = 0;
var mState = 0;
function setCellInit(object) {
	object.className = 'inactiveCell';

	/*
	 * object.onmouseenter = function(){ alert("onmouseenter"); };
	 */

	/*
	 * object.onmousemove = function(){ alert("onmousemove"); }
	 */

	object.onmousedown = function() {
		var inputID = "inputNo_" + getSequence(this.parentNode) + "_"
				+ getSequence(this);
		var cellNo = "cellNo_" + getSequence(this.parentNode) + "_"
				+ getSequence(this);
		if (document.getElementById(inputID).value != "1") {
			cState = 0;

			this.className = 'activeCell';
			document.getElementById(inputID).className = 'activeCell';
			document.getElementById(inputID).value = "1";
			document.getElementById(cellNo).className = 'activeCell';
		} else {
			cState = 1;

			this.className = 'inactiveCell';
			document.getElementById(inputID).className = 'inactiveCell';
			document.getElementById(inputID).value = "0";
			document.getElementById(cellNo).className = 'inactiveCell';
		}

		mState = 1;
	};

	object.onmouseup = function() {
		mState = 0;
	};

	object.onmousemove = function() {
		if (mState == 1) {
			var inputID = "inputNo_" + getSequence(this.parentNode) + "_"
					+ getSequence(this);
			var cellNo = "cellNo_" + getSequence(this.parentNode) + "_"
					+ getSequence(this);
			if (cState == "0") {
				this.className = 'activeCell';
				document.getElementById(inputID).className = 'activeCell';
				document.getElementById(inputID).value = "1";
				document.getElementById(cellNo).className = 'activeCell';
			} else {
				this.className = 'inactiveCell';
				document.getElementById(inputID).className = 'inactiveCell';
				document.getElementById(inputID).value = "0";
				document.getElementById(cellNo).className = 'inactiveCell';
			}
		}
	};
}

function setCellWidth() {
	var sizeTable = document.getElementById("sizeTable");
	var lis = sizeTable.getElementsByTagName("li");

	for (var i = 0; i < lis.length; i++) {
		lis[i].onclick = function() {
			// if (presentTable == "sizeTable")
			cellSize = this.id.substr(9, 2) + "px";

			setStyle();
		};
	}
}

function setGapSize() {
	var gapSizeTable = document.getElementById("gapSizeTable");
	var lis = gapSizeTable.getElementsByTagName("li");

	for (var i = 0; i < lis.length; i++) {
		lis[i].onclick = function() {
			cMargin = this.id.substr(12, 1) + "px";
			setStyle();
		};
	}
}

function drawCell(rows, cols) {
	for (var i = 0; i < rows; i++) {
		var ul = document.createElement("ul");
		ul.id = "newLine" + i;
		for (var j = 0; j < cols; j++) {
			var li = document.createElement("li");
			li.id = "cellNo_" + i + "_" + j;
			li.className = "inactiveCell";
			ul.appendChild(li);
		}
		workerPanel.appendChild(ul);
	}

	var ul = document.createElement("ul");
	ul.id = "inputUL";
	for (var i = 0; i < rows; i++) {
		var li = document.createElement("li");
		li.id = "inputLI_" + i;
		for (var j = 0; j < cols; j++) {
			var input = document.createElement("input");
			input.id = "inputNo_" + i + "_" + j;
			input.name = "inputNo_" + i + "_" + j;
			input.className = "inactiveCell";
			input.type = "hidden";
			input.value = "0";
			li.appendChild(input);
		}
		ul.appendChild(li);
	}
	hiddenPanel.appendChild(ul);
}

var rotate_direction = "row";
function rotate() {
	var worker = document.getElementById("worker");
	var controlers = document.getElementById("controlers");
	if (rotate_direction == "row") {
		controlers.className = 'controlers_col';
		worker.className = 'worker_col';
		rotate_direction = "col";
	} else {
		controlers.className = 'controlers_row';
		worker.className = 'worker_row';
		rotate_direction = "row";
	}
}

function repeat(string, a, b) {
	var root = Math.sqrt(string.length);
	var rows = root;
	var cols = root;

	// var rows = document.getElementById("rowNum").value;
	// var cols = document.getElementById("colNum").value;
	var stringRepeat = "";
	var stringTemp = "";
	for (var i = 0; i < cols; i++) {
		for (var x = 0; x < a; x++) {
			stringTemp += string.substr(i * rows, rows);
		}
	}

	for (var y = 0; y < b; y++) {
		stringRepeat += stringTemp;
	}
	return stringRepeat;
}

var matrix = new Array();
function setA() {
	var houndTooth = "";
	houndTooth += "1111111122220000";
	houndTooth += "1111111122200001";
	houndTooth += "1111111122000011";
	houndTooth += "1111111120000111";
	houndTooth += "1111111100001111";
	houndTooth += "1111111100011110";
	houndTooth += "1111111100111100";
	houndTooth += "1111111101111000";
	houndTooth += "0000333300000000";
	houndTooth += "0003333000000000";
	houndTooth += "0033330000000000";
	houndTooth += "0333300000000000";
	houndTooth += "3333000300000000";
	houndTooth += "3330003300000000";
	houndTooth += "3300033300000000";
	houndTooth += "3000333300000000";

	var houndToothStitch = "";
	houndToothStitch += "00000000000001100000000000000000";
	houndToothStitch += "01111110011001100111111000000000";
	houndToothStitch += "01111110011001100111111000000000";
	houndToothStitch += "00000000011000000000000000000000";
	houndToothStitch += "00000000011000000000000000000000";
	houndToothStitch += "11100110011011111110000000000111";
	houndToothStitch += "11100110011011111110000000000111";
	houndToothStitch += "00000110000000000000000000000000";
	houndToothStitch += "00000110000000000000000000000000";
	houndToothStitch += "01100110011111100000000001111110";
	houndToothStitch += "01100110011111100000000001111110";
	houndToothStitch += "01100000000000000000000000000000";
	houndToothStitch += "01100000000000000000000000000000";
	houndToothStitch += "01101111111101100000011111100000";
	houndToothStitch += "01101111111101100000011111100000";
	houndToothStitch += "00000000000001100000000000000000";
	houndToothStitch += "00000000000001100000000000000000";
	houndToothStitch += "00000000011001100000000000000000";
	houndToothStitch += "00000000011001100000000000000000";
	houndToothStitch += "00000000011000000000000000000000";
	houndToothStitch += "00000000011000000000000000000000";
	houndToothStitch += "00000110011000000000000000000000";
	houndToothStitch += "00000110011000000000000000000000";
	houndToothStitch += "00000110000000000000000000000000";
	houndToothStitch += "00000110000000000000000000000000";
	houndToothStitch += "01100110000000000000000000000000";
	houndToothStitch += "01100110000000000000000000000000";
	houndToothStitch += "01100000000000000000000000000000";
	houndToothStitch += "01100000000000000000000000000000";
	houndToothStitch += "01100000000001100000000000000000";
	houndToothStitch += "01100000000001100000000000000000";
	houndToothStitch += "00000000000001100000000000000000";

	var whiteLodgeFlooring = "";
	whiteLodgeFlooring += "11111111000000110000000011111111";
	whiteLodgeFlooring += "11111100000011111100000000111111";
	whiteLodgeFlooring += "11110000000111111111000000001111";
	whiteLodgeFlooring += "11000000011111111111110000000011";
	whiteLodgeFlooring += "00000001111111111111111100000000";
	whiteLodgeFlooring += "00000111111111111111111111000000";
	whiteLodgeFlooring += "00011111111111111111111111110000";
	whiteLodgeFlooring += "01111111111111111111111111111100";
	whiteLodgeFlooring += "11111111111111111111111111111111";

	// var string_00 = "1111111122220000";
	// var string_01 = "1111111122200001";
	// var string_02 = "1111111122000011";
	// var string_03 = "1111111120000111";
	// var string_04 = "1111111100001111";
	// var string_05 = "1111111100011110";
	// var string_06 = "1111111100111100";
	// var string_07 = "1111111101111000";
	// var string_08 = "0000333300000000";
	// var string_09 = "0003333000000000";
	// var string_0A = "0033330000000000";
	// var string_0B = "0333300000000000";
	// var string_0C = "3333000300000000";
	// var string_0D = "3330003300000000";
	// var string_0E = "3300033300000000";
	// var string_0F = "3000333300000000";

	string = repeat(houndTooth, 4, 4);

	var cols = document.getElementById("colNum").value;

	for (var i = 0; i < string.length; i++) {
		var x = parseInt(i / cols);
		var y = parseInt(i % cols);
		if (y == 0) {
			matrix[x] = new Array();
		}
		matrix[x][y] = string.substring(i, 1);

		if (string.substr(i, 1) != "0") {
			document.getElementById('cellNo_' + x + '_' + y).className = "activeCell";
			// document.getElementById('inputNo_' + x + '_' + y).className =
			// "activeCell";
			document.getElementById('inputNo_' + x + '_' + y).value = "1";
		}
	}
}

// function rule(unit) {
// var pxRulerRow = document.getElementById("pxRulerRow");
// var pxRulerCol = document.getElementById("pxRulerCol");
// if (unit == "px") {
// pxRulerRow.style.backgroundImage = "url('../_img/dot_RulerRow.gif')";
// pxRulerCol.style.backgroundImage = "url('../_img/dot_RulerCol.gif')";
// } else if (unit == "cm") {
// pxRulerRow.style.backgroundImage =
// "url('./_img/dotDesign/dot_rulerRow_cm.gif')";
// pxRulerCol.style.backgroundImage =
// "url('./_img/dotDesign/dot_rulerCol_cm.gif')";
// }
// }
/*
 * *****************************************************************************
 * common
 */

function set_borderWidth_c() {
	var borderWidthExState_c = false;
	document.getElementById("borderWidth_btn_c").parentNode.onclick = function() {
		if (!borderWidthExState_c) {
			borderWidth_c_Ex.style.display = "block";
			borderWidthExState_c = true;
		} else {
			borderWidth_c_Ex.style.display = "none";
			borderWidthExState_c = false;
		}
	};

	var borderWidthView_c = document.getElementById("borderWidthView_c");
	var borderWidth_c_Ex = document.getElementById("borderWidth_c_Ex");
	var lis = borderWidth_c_Ex.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {
		var views = lis[i].getElementsByTagName("div");
		views[0].style.borderTopWidth = getText(lis[i]
				.getElementsByTagName("span")[0]);
		lis[i].onclick = function() {
			var borderWidth_c = document.getElementById("borderWidth_c");
			var text = this.getElementsByTagName("span");
			borderWidth_c.value = getText(text[0]);

			getStyle();
			setStyle();

			this.parentNode.style.display = "none";
			borderWidthExState_c = false;

			borderWidthView_c.style.borderWidth = getText(text[0]);
			var marginTop = getText(text[0]).replace("px", "");
			marginTop = (16 - marginTop) / 2 + "px";
			borderWidthView_c.style.marginTop = marginTop;
		};
	}
}

function createColorList(el, id, name) {
	var colorListArray = [ "#FE1100", "#FE4C24", "#FE875A", "#FECDA7",
			"#040967", "#2D328D", "#44499A", "#686EB8", "#007B1D", "#2F9D4C",
			"#8BCDA2", "#AEDEC1", "#6E0017", "#7B243D", "#834C6B", "#987E95",
			"#006BD4", "#0087E1", "#37B7FE", "#A7DEFE", "#FEFE00", "#FEFE03",
			"#FEFE9F", "#FEFED0", "#4E003D", "#6D2262", "#926594", "#C2A9C5",
			"#005557", "#03747B", "#579D9F", "#A2C6CC", "#F45F00", "#FE9739",
			"#FECD8A", "#FEE2B0", "#1B0B73", "#4C379D", "#876EBA", "#BBBAEF",
			"#008E37", "#26B168", "#47BE80", "#76D3A2", "#B31C00", "#B03F21",
			"#AE623A", "#AC6E54", "#FEFEFE", "#E6E6E6", "#CDCDCD", "#B4B4B4",
			"#A8A8A8", "#8D8D8D", "#747474", "#595959", "#4B4B4B", "#303030",
			"#161616", "#000000" ];

	var selectColorList = document.createElement("select");
	selectColorList.id = id;
	selectColorList.name = id;
	for (var i = 0; i < colorListArray.length; i++) {
		var option = document.createElement("option");
		option.value = colorListArray[i];
		// option.className = 'colorSelector';

		option.style.color = "#FFFFFF";
		option.style.backgroundColor = option.value;

		var text = document.createTextNode("■ " + colorListArray[i]);
		option.appendChild(text);
		selectColorList.appendChild(option);
	}
	el.appendChild(selectColorList);
}

/*******************************************************************************
 * ***************************************************************** activeCell
 ******************************************************************************/

var list_ext = null;
function fn_ext_list(id, defaultValue) {
	var selector = document.getElementById(id);
	var fisrtDiv = selector.getElementsByTagName("div")[0]; // wapper
	var presentView = fisrtDiv.getElementsByTagName("div")[0]; // preview
	var fisrtInput = selector.getElementsByTagName("input")[0]; // preview_text
	var ul = selector.getElementsByTagName("ul")[0];

	fisrtDiv.onclick = function() {
		this.className = "wrapper_bottom";
		if (list_ext == null) {
			ul.style.display = "block";
			list_ext = ul;
			ul.onmouseleave = function() {
				ul.style.display = "none";
				list_ext = null;
			}
		} else {
			if (list_ext == ul) {
				ul.style.display = "none";
				list_ext = null;
			} else {
				list_ext.style.display = "none";
				ul.style.display = "block";
				list_ext = ul;
			}
		}
	}
	ul.onmouseleave = function() {
		fisrtDiv.className = "wrapper";
		ul.style.display = "none";
		list_ext = null;
	}

	var list = ul.getElementsByTagName("li");
	for (var i = 0; i < list.length; i++) {
		list[i].onclick = function() {
			this.parentNode.style.display = "none";
			list_ext = null;
			fisrtInput.value = getText(this.getElementsByTagName("span")[0]);
			presentView.className = this.getElementsByTagName("div")[0].className;
		}
	}
	fisrtInput.value = getText(list[defaultValue].getElementsByTagName("span")[0]);
	presentView.className = list[defaultValue].getElementsByTagName("div")[0].className;
}

var eExState = null;
function set_borderStyle_a() {

	document.getElementById("btn_borderStyle_a").parentNode.onclick = function() {
		if (eExState == null) {
			borderStyle_a_Ex.style.display = "block";
			eExState = this;
			borderStyle_a_Ex.onmouseleave = function() {
				this.style.display = "none";
				eExState = null;
			}
		} else {
			borderStyle_a_Ex.style.display = "none";
			eExState = null;
		}
	};

	var borderStyle_a_View = document.getElementById("borderStyle_a_View");
	var borderStyle_a_Ex = document.getElementById("borderStyle_a_Ex");
	var lis = borderStyle_a_Ex.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {
		var views = lis[i].getElementsByTagName("div");
		views[0].style.backgroundColor = document
				.getElementById("colorPicker_acc").value;
		views[0].style.borderColor = document
				.getElementById("colorPicker_acbc").value;
		views[0].style.borderStyle = getText(lis[i]
				.getElementsByTagName("span")[0]);

		lis[i].onclick = function() {
			var borderStyle_a = document.getElementById("borderStyle_a");
			var text = this.getElementsByTagName("span");
			borderStyle_a.value = getText(text[0]);

			getStyle();
			setStyle();

			this.parentNode.style.display = "none";
			eExState = null;
			borderStyle_a_View.style.borderStyle = getText(text[0]);
			borderStyle_a_View.style.borderColor = document
					.getElementById("colorPicker_acbc").value;
			borderStyle_a_View.style.backgroundColor = document
					.getElementById("colorPicker_acc").value;
		};
	}

	borderStyle_a_View.style.backgroundColor = document
			.getElementById("colorPicker_acc").value;
	borderStyle_a_View.style.borderColor = document
			.getElementById("colorPicker_acbc").value;
}

function set_roundStyle_a() {
	document.getElementById("btn_roundStyle_a").parentNode.onclick = function() {
		if (eExState == null) {
			roundStyle_a_Ex.style.display = "block";
			eExState = this;
			borderStyle_a_Ex.onmouseleave = function() {
				this.style.display = "none";
				eExState = null;
			}
		} else {
			roundStyle_a_Ex.style.display = "none";
			eExState = null;
		}
	};

	var roundStyleView_a = document.getElementById("roundStyleView_a");
	var roundStyle_a_Ex = document.getElementById("roundStyle_a_Ex");
	var lis = roundStyle_a_Ex.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {

		var views = lis[i].getElementsByTagName("div");
		views[0].style.backgroundColor = document
				.getElementById("colorPicker_acc").value;
		views[0].style.borderColor = document
				.getElementById("colorPicker_acbc").value;
		views[0].style.borderStyle = document.getElementById("borderStyle_a").value;
		views[0].style.borderRadius = getText(lis[i]
				.getElementsByTagName("span")[0]);

		lis[i].onclick = function() {
			var roundStyle_a = document.getElementById("roundStyle_a");
			var text = this.getElementsByTagName("span");
			roundStyle_a.value = getText(text[0]);
			activeCellRoundType = getText(text[0]);

			getStyle();
			setStyle();

			this.parentNode.style.display = "none";
			eExState = null;
			roundStyleView_a.style.borderRadius = getText(text[0]);
			roundStyleView_a.style.borderColor = document
					.getElementById("colorPicker_acbc").value;
			roundStyleView_a.style.backgroundColor = document
					.getElementById("colorPicker_acc").value;
		};
	}

	roundStyleView_a.style.borderRadius = document
			.getElementById("roundStyle_a").value;
	roundStyleView_a.style.backgroundColor = document
			.getElementById("colorPicker_acc").value;
	roundStyleView_a.style.borderColor = document
			.getElementById("colorPicker_acbc").value;
}
/* ************************************************************** inActiveCell */

function set_borderStyle_i() {
	document.getElementById("btn_borderStyle_i").parentNode.onclick = function() {
		if (eExState == null) {
			borderStyle_i_Ex.style.display = "block";
			eExState = this;
			borderStyle_i_Ex.onmouseleave = function() {
				this.style.display = "none";
				eExState = null;
			}
		} else {
			borderStyle_i_Ex.style.display = "none";
			eExState = null;
		}
	};

	var borderStyleView_i = document.getElementById("borderStyleView_i");
	var borderStyle_i_Ex = document.getElementById("borderStyle_i_Ex");
	var lis = borderStyle_i_Ex.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {

		var views = lis[i].getElementsByTagName("div");
		views[0].style.backgroundColor = document
				.getElementById("colorPicker_dcc").value;
		views[0].style.borderColor = document
				.getElementById("colorPicker_dcbc").value;
		views[0].style.borderStyle = getText(lis[i]
				.getElementsByTagName("span")[0]);

		lis[i].onclick = function() {
			var borderStyle_i = document.getElementById("borderStyle_i");
			var text = this.getElementsByTagName("span");
			borderStyle_i.value = getText(text[0]);

			getStyle();
			setStyle();

			this.parentNode.style.display = "none";
			eExState = null;

			borderStyleView_i.style.backgroundColor = document
					.getElementById("colorPicker_dcc").value;
			borderStyleView_i.style.borderColor = document
					.getElementById("colorPicker_dcbc").value;
			borderStyleView_i.style.borderStyle = getText(text[0]);
		};
	}
	borderStyleView_i.style.backgroundColor = document
			.getElementById("colorPicker_dcc").value;
	borderStyleView_i.style.borderColor = document
			.getElementById("colorPicker_dcbc").value;
}

/*******************************************************************************
 * ********************************************************************** panel
 ******************************************************************************/

function set_borderStyle_p() {
	document.getElementById("btn_borderStyle_p").parentNode.onclick = function() {
		if (eExState == null) {
			borderStyle_p_Ex.style.display = "block";
			eExState = this;
			borderStyle_p_Ex.onmouseleave = function() {
				this.style.display = "none";
				eExState = null;
			}
		} else {
			borderStyle_p_Ex.style.display = "none";
			eExState = null;
		}
	};

	var borderStyleView_p = document.getElementById("borderStyleView_p")
	var borderStyle_p_Ex = document.getElementById("borderStyle_p_Ex");
	var lis = borderStyle_p_Ex.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {

		var views = lis[i].getElementsByTagName("div");
		views[0].style.backgroundColor = document
				.getElementById("colorPicker_pc").value;
		views[0].style.borderColor = document.getElementById("colorPicker_pbc").value;
		views[0].style.borderStyle = getText(lis[i]
				.getElementsByTagName("span")[0]);

		lis[i].onclick = function() {
			var borderStyle_p = document.getElementById("borderStyle_p");
			var text = this.getElementsByTagName("span");
			borderStyle_p.value = getText(text[0]);

			getStyle();
			setStyle();

			this.parentNode.style.display = "none";
			eExState = null;
			borderStyleView_p.style.backgroundColor = document
					.getElementById("colorPicker_pc").value;
			borderStyleView_p.style.borderColor = document
					.getElementById("colorPicker_pbc").value;
			borderStyleView_p.style.borderStyle = getText(text[0]);
		};
	}
	borderStyleView_p.style.backgroundColor = document
			.getElementById("colorPicker_pc").value;
	borderStyleView_p.style.borderColor = document
			.getElementById("colorPicker_pbc").value;
}

function set_borderWidth_p() {
	document.getElementById("btn_borderWidth_p").parentNode.onclick = function() {
		if (eExState == null) {
			borderWidth_p_Ex.style.display = "block";
			eExState = this;
			borderWidth_p_Ex.onmouseleave = function() {
				this.style.display = "none";
				eExState = null;
			}
		} else {
			borderWidth_p_Ex.style.display = "none";
			eExState = null;
		}
	};

	var borderWidthView_p = document.getElementById("borderWidthView_p");
	var borderWidth_p_Ex = document.getElementById("borderWidth_p_Ex");
	borderWidthView_p.style.borderTopColor = document
			.getElementById("colorPicker_pbc").value;
	var lis = borderWidth_p_Ex.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {
		var views = lis[i].getElementsByTagName("div");
		views[0].style.borderTopWidth = getText(lis[i]
				.getElementsByTagName("span")[0]);
		views[0].style.borderTopColor = document
				.getElementById("colorPicker_pbc").value;

		lis[i].onclick = function() {
			var borderWidth_p = document.getElementById("borderWidth_p");
			var text = this.getElementsByTagName("span");
			borderWidth_p.value = getText(text[0]);

			getStyle();
			setStyle();

			this.parentNode.style.display = "none";
			eExState = null;

			borderWidthView_p.style.borderTopWidth = getText(text[0]);
			borderWidthView_p.style.borderTopColor = document
					.getElementById("colorPicker_pbc").value;
			var marginTop = getText(text[0]).replace("px", "");
			marginTop = (16 - marginTop) / 2 + "px";
			borderWidthView_p.style.marginTop = marginTop;
		};
	}
}

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;
	if (typeof (window.pageYOffset) == 'number') {
		// Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if (document.body
			&& (document.body.scrollLeft || document.body.scrollTop)) {
		// DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if (document.documentElement
			&& (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
		// IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	alert("scrOfX:" + scrOfX + ", scrOfY:" + scrOfY);
}

function alertSize() {
	var myWidth = 0, myHeight = 0;
	if (typeof (window.innerWidth) == 'number') {
		// Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if (document.documentElement
			&& (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		// IE 6+ in 'standards compliant mode'
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if (document.body
			&& (document.body.clientWidth || document.body.clientHeight)) {
		// IE 4 compatible
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
	window.alert('Width = ' + myWidth);
	window.alert('Height = ' + myHeight);
}

function getPosition(obj) {

	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}

	alert(curleft + ":" + curtop);
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj && obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [ curleft, curtop ];
}

function getX(oElement) {
	var iReturnValue = 0;
	while (oElement != null) {
		iReturnValue += oElement.offsetLeft;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}
function getY(oElement) {
	var iReturnValue = 0;
	while (oElement != null) {
		iReturnValue += oElement.offsetTop;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}

function Fn_dummy() {
	return 0;
}

function newPlace() {
	var workerPanel = document.getElementById("workerPanel");
	var uls = workerPanel.getElementsByTagName('ul');
	for (var row = 0; row < uls.length; row++) {
		var lis = uls[row].getElementsByTagName('li');
		for (var col = 0; col < lis.length; col++) {
			lis[col].className = "inactiveCell";
		}
	}
}

function transToNum() {

}

function fn_selected(id, value) {
	var tagName = document.getElementById(id).nodeName;
	if (tagName == "SELECT") {
		var select = document.getElementById(id);
		select[value].selected = "selected";
	} else if (tagName == "INPUT") {
		if (document.getElementById(id).type.toUpperCase() == "COLOR") {
			document.getElementById(id).value = value;
		} else {
			var ul = document.getElementById(id + "_Ex");
			document.getElementById(id).value = ul.childNodes[value * 2 + 1].childNodes[3].innerHTML;
			var div = document.getElementById(id).previousSibling.previousSibling;
			if (div.className == "preview_Style") {
				div.style.borderStyle = document.getElementById(id).value;
			} else if (div.className == "preview_Width") {
				div.style.marginTop = (16 - (document.getElementById(id).value)
						.replace("px", ""))
						/ 2 + "px";
				div.style.borderWidth = document.getElementById(id).value;
			}
		}
	}
}

function fn_colorPicker(object) {
	if (object.id == 'colorPicker_acc') {
		activeCellColor = object.value;
	} else if (object.id == 'colorPicker_acbc') {
		activeCellBorderColor = object.value;
	} else if (object.id == 'colorPicker_dcc') {
		defaultCellColor = object.value;
	} else if (object.id == 'colorPicker_dcbc') {
		defaultCellBorderColor = object.value;
	} else if (object.id == 'colorPicker_pc') {
		panelColorValue = object.value;
	} else if (object.id == 'colorPicker_pbc') {
		panelBorderColor = object.value;
	}

	setStyle();
}

function findScreenPos(obj) {
	// =========================================================================
	var cellHeight = parseInt(cHeight.replace("px", ""));
	var cellWidth = parseInt(cWidth.replace("px", ""));
	var cellMarginTop = parseInt(cMarginTop.replace("px", ""));
	var cellMarginRight = parseInt(cMarginRight.replace("px", ""));
	var cellBorderWidth = parseInt(borderWidth_c.replace("px", ""));
	var panelBorderWidth = parseInt(borderWidth_p.replace("px", ""));

	var dummyHeight = rows * (cellHeight + cellMarginTop + cellBorderWidth * 2)
			+ cellMarginTop + panelBorderWidth * 2;

	var dummyWidth = cols * (cellWidth + cellMarginRight + cellBorderWidth * 2)
			+ cellMarginRight + panelBorderWidth * 2;

	var left;
	var top;
	var file;

	var browserBorderWidth;
	if (kindOfBrowser() == "IE") {
		top = window.screenTop + 1;
		left = (window.screen.availWidth - document.documentElement.clientWidth) / 2;
	} else if (kindOfBrowser() == "Firefox") {
		top = (window.screen.availHeight - document.documentElement.clientHeight);
		left = (window.screen.availWidth - document.documentElement.clientWidth) / 2;
	} else if (kindOfBrowser() == "Chrome") {

		browserBorderWidth = (window.outerWidth - window.innerWidth) / 2;
		left = window.screenX + browserBorderWidth;
		top = window.screenY + (window.outerHeight - window.innerHeight)
				- browserBorderWidth;
	}

	top += findPos(document.getElementById("workerPanel"))[1];
	left += findPos(document.getElementById("workerPanel"))[0];

	fileName = "capture_" + kindOfBrowser() + ".jpg";
	var m = "";
	m += "window.screenX :" + window.screenX + "\n";
	m += "window.screen.availWidth : " + window.screen.availWidth + "\n";
	m += "document.documentElement.clientWidth  :"
			+ document.documentElement.clientWidth + "\n";
	m += "=====================================" + "\n";
	m += "window.screenY +:" + window.screenY + "\n";
	m += "window.screen.availHeight :" + window.screen.availHeight + "\n";
	m += "document.documentElement.clientHeight :"
			+ document.documentElement.clientHeight + "\n";
	m += "top : " + top;
	m += "left : " + left;

	// alert(m)
	//
	// getStyle();
	//
	// var f = document.forms[0];
	// document.forms[0].action = "./dotCtrl0.jsp";
	// var pop = window.open("", "log_in", 'height=' + dummyHeight + ',width=' +
	// dummyWidth + ', top=' + top + ', left='
	// + left + ',status=0,toolbar=0,location=0' +
	// 'menubar=0,resizable=0,scrollbars=0');
	// f.target = "log_in";
	// f.submit();

	// =========================================================================
	url = "./servlet/ScreenCapture.do";
	url += "?dummy=" + new Date().getTime();
	url += "&browser=" + kindOfBrowser();
	url += "&top=" + top;
	url += "&left=" + left;
	url += "&width=" + dummyWidth;
	url += "&height=" + dummyHeight;
	url += "&fileName=" + fileName;

	request = getXMLHTTPRequest();
	request.open("Get", url, true);
	request.onreadystatechange = function() {
	};

	request.send(null);

	// =========================================================================
	// dummy = window.open('./captureNow.html', 'pop1', 'height=' + dummyHeight
	// + ',width=' + dummyWidth + ', top=' + top
	// + ', left=' + left + ',status=0,toolbar=0,location=0' +
	// 'menubar=0,resizable=0,scrollbars=0');
	// var bottomBarHeight = dummy.outerHeight - dummy.innerHeight;
	//
	// // setTimeout("dummy.close()", 1000 * 3);
	//
	// var topNavigationHeight = window.outerHeight - window.innerHeight -
	// bottomBarHeight;
	//
	// // Calculate the total screen offset
	// screenTopOffset = window.screenY + topNavigationHeight;
	// screenLeftOffset = window.screenX;
	// pagePosition = findPos(obj);

	// alert(screenLeftOffset + pagePosition[0] + " : " + screenTopOffset +
	// pagePosition[1]);
	// return [ screenLeftOffset + pagePosition[0], screenTopOffset +
	// pagePosition[1] ];
}

function fn_captrue() {
	findScreenPos(document.getElementById("workerPanel"));
}

function fn_submit() {
	var m = "";

	m += "\n===============window===================";
	m += "\nwindow.screenLeft :" + window.screenLeft;
	m += "\nwindow.screenTop :" + window.screenTop;
	m += "\nwindow.screen.height :" + window.screen.height;
	m += "\nwindow.screen.width :" + window.screen.width;
	m += "\nwindow.screen.availHeight :" + window.screen.availHeight;
	m += "\nwindow.screen.availWidth:" + window.screen.availWidth;

	m += "\nwindow.outerHeight :" + window.outerHeight;
	m += "\nwindow.innerHeight :" + window.innerHeight;

	m += "\ndocument.body.clientHeight :" + document.body.clientHeight;
	m += "\ndocument.body.clientWidth :" + document.body.clientWidth;

	m += "\nwindow.screenX :" + window.screenX;
	m += "\nwindow.screenY :" + window.screenY;

	m += "\ndocument.documentElement.clientWidth :"
			+ document.documentElement.clientWidth;
	m += "\ndocument.documentElement.clientHeight:"
			+ document.documentElement.clientHeight;
	m += "\ndocument.documentElement.scrollLeft:"
			+ document.documentElement.scrollLeft;
	m += "\ndocument.documentElement.scrollTop:"
			+ document.documentElement.scrollTop;
	m += "\n===============document==================";
	m += "\ndocument.body.clientWidth:" + document.body.clientWidth;
	m += "\ndocument.body.clientHeight:" + document.body.clientHeight;
	m += "\ndocument.body.clientX:" + document.body.clientX;
	m += "\ndocument.body.clientY:" + document.body.clientY;
	m += "\ndocument.body.scrollLeft:" + document.body.scrollLeft;
	m += "\ndocument.body.scrollTop:" + document.body.scrollTop;

	m += "\ndocument.workerPanel.scrollTop:"
			+ document.getElementById("workerPanel").scrollTop;
	m += "\ndocument.workerPanel.scrollLeft:"
			+ document.getElementById("workerPanel").scrollLeft;
	m += "\ndocument.workerPanel.offsetLeft:"
			+ document.getElementById("workerPanel").offsetLeft;
	m += "\ndocument.workerPanel.offsetTop:"
			+ document.getElementById("workerPanel").offsetTop;

	m += "\n�۾�ǥ���� ����:"
			+ (window.screen.height - window.screen.availHeight);
	m += "\n��� �� ����:"
			+ (window.screen.availHeight - document.documentElement.clientHeight);

	// alert(m);

	var screenX = window.screenLeft; // 칭의 왼쪽 기준위치
	var screenY = window.screenTop; // 창의 상단 기준위치
	var docWidth = document.documentElement.clientWidth; // 문서 X 크기
	var docHeight = document.documentElement.clientHeight; // 문서Y의크기

	var poupX = ((docWidth / 2) / 2) + screenX;
	var poupY = ((docHeight / 2) / 2) + screenY;

	alert(m + "\n\n\n" + screenX + "," + screenY);

}

function fn_setReadOnly() {
	var inputs = document.getElementsByTagName("input");
	for (var i = 0; i < inputs.length; i++) {
		if (inputs[i].className.indexOf("readOnly") > -1) {
			inputs[i].readOnly = true;
		}
	}
}
/* ************************************************************************** */
/* ********************************* window.onload ************************** */
/* ************************************************************************** */

window.onload = function() {

	// alert(navigator.userAgent.toLowerCase());
	// alert(kindOfBrowser());
	fn_drawRuler_row();
	fn_drawRuler_col();
	fn_setReadOnly();

	var divs = document.getElementsByTagName("div");
	for (i = 0; i < divs.length; i++) {
		if (divs[i].className == "selector") {
			fn_ext_list(divs[i].id, 0);
		}
	}

	// fn_ext_list("selector_borderWidth", 1);
	// fn_ext_list("selector_borderType", 1);
	// fn_ext_list("selector_roundType", 1);

	document.getElementById("btn_capture").onclick = fn_captrue

	workerPanel = document.getElementById("workerPanel");
	hiddenPanel = document.getElementById("hiddenPanel");

	var exCellMargin = document.getElementById("exCellMargin");
	exCellMargin.onclick = function() {
		if (getText(exCellMargin) == "▼") {
			document.getElementById("trMarginRight").style.display = "table-row";
			document.getElementById("trMarginTop").style.display = "table-row";
			document.getElementById("cMargin").disabled = true;
			replaceText(exCellMargin, "▲");
		} else {
			document.getElementById("trMarginRight").style.display = "none";
			document.getElementById("trMarginTop").style.display = "none";
			replaceText(exCellMargin, "▼");
			document.getElementById("cMargin").disabled = false;

			document.getElementById("cMarginTop").value = document
					.getElementById("cMargin").value;
			document.getElementById("cMarginRight").value = document
					.getElementById("cMargin").value;
			getStyle();
			setStyle();
		}
	};

	var exCellSize = document.getElementById("exCellSize");
	exCellSize.onclick = function() {
		if (getText(exCellSize) == "▼") {
			document.getElementById("trCellWidth").style.display = "table-row";
			document.getElementById("trCellHeight").style.display = "table-row";
			document.getElementById("cellSize").disabled = true;
			replaceText(exCellSize, "▲");
		} else {
			document.getElementById("trCellWidth").style.display = "none";
			document.getElementById("trCellHeight").style.display = "none";
			replaceText(exCellSize, "▼");
			document.getElementById("cellSize").disabled = false;

			document.getElementById("cellWidth").value = document
					.getElementById("cellSize").value;
			document.getElementById("cellHeight").value = document
					.getElementById("cellSize").value;
			getStyle();
			setStyle();
		}
	};

	/* ********************************************************set default value */
	document.getElementById('colNum').value = 64 // 16
	document.getElementById('rowNum').value = 64; // 16
	fn_selected('cMargin', 0); // 2px * 2px
	fn_selected('cMarginRight', 0); // 2px
	fn_selected('cMarginTop', 0); // 2px
	fn_selected('cellSize', 0); // 16px * 16px
	fn_selected('cellWidth', 0); // 16px
	fn_selected('cellHeight', 0); // 16px
	fn_selected('borderWidth_c', 1) // 4px;'
	set_borderWidth_c();

	fn_selected('colorPicker_pc', "#DDDDDD");
	fn_selected('colorPicker_pbc', "#AAAAAA");
	fn_selected('borderStyle_p', 0) // double;
	set_borderStyle_p();
	fn_selected('borderWidth_p', 2) // 4px;
	set_borderWidth_p();

	fn_selected('colorPicker_acc', "#000000");
	fn_selected('colorPicker_acbc', "#CCCCCC");
	fn_selected('borderStyle_a', 0) // solid;
	fn_selected('roundStyle_a', 0) // 0px;
	set_borderStyle_a();
	set_roundStyle_a();

	fn_selected('colorPicker_dcc', "#EEEEEE");
	fn_selected('colorPicker_dcbc', "#BBBBBB");
	fn_selected('borderStyle_i', 0) // dashed;
	set_borderStyle_i();

	// set_backgroundColor_a(0);
	// set_borderColor_a(7);
	//
	// set_backgroundColor_i(11);
	// set_borderColor_i(15);
	//
	// set_backgroundColor_p(19);
	// set_borderColor_p(27);

	rotate();
	getStyle();
	drawCell(rows, cols);

	setStyle();
	setWorkerPanel();

	replaceText(document.getElementById("appCode"), navigator.appCodeName);
	replaceText(document.getElementById("appName"), navigator.appName);
	replaceText(document.getElementById("appVer"), navigator.appVersion);
	replaceText(document.getElementById("appLang"), navigator.language);
	replaceText(document.getElementById("sysCode"), navigator.platform);
	replaceText(document.getElementById("userAgent"), navigator.userAgent);
	replaceText(document.getElementById("scriptEnabled"), navigator
			.javaEnabled());
	// replaceText(document.getElementById("taintEnabled"),
	// navigator.taintEnabled());

	// ==================================================== cell volumn control
	document.getElementById("addCol").onclick = addCol;
	document.getElementById("addRow").onclick = addRow;
	document.getElementById("removeCol").onclick = removeCol;
	document.getElementById("removeRow").onclick = removeRow;

	document.getElementById("cMargin").onchange = function() {
		document.getElementById("cMarginTop").value = this.value;
		document.getElementById("cMarginRight").value = this.value;
		cMarginTop = this.value;
		cMarginRight = this.value;
		setStyle();
	};

	document.getElementById("cMarginTop").onchange = function() {
		cMarginTop = this.value;
		setStyle();
	};

	document.getElementById("cMarginRight").onchange = function() {
		cMarginRight = this.value;
		setStyle();
	};

	document.getElementById("cellSize").onchange = function() {
		document.getElementById("cellWidth").value = this.value;
		document.getElementById("cellHeight").value = this.value;
		cHeight = this.value;
		cWidth = this.value;
		setStyle();
	};

	document.getElementById("cellWidth").onchange = function() {
		cWidth = this.value;
		setStyle();
	};

	document.getElementById("cellHeight").onchange = function() {
		cHeight = this.value;
		setStyle();
	};

	setA();
};

function downFile() {
	document.frm.action = "./ctrl.jsp";
	document.frm.method = "post";
	document.frm.submit();
}

/*
 * function widthHeight() { var str; str = "rows: " + rows; str += "\ncols: " +
 * cols; str += "\ncellSize: " + cellSize; str += "\ncMargin: " + cMargin; str +=
 * "\ncellBorderSize: " + cellBorderSize; str += "\n"; str +=
 * "\nactiveCellColor: " + activeCellColor; str += "\nactiveCellBorderColor: " +
 * activeCellBorderColor; str += "\nactiveCellBorderType: " +
 * activeCellBorderType; str += "\n"; str += "\ndefaultCellColor: " +
 * defaultCellColor; str += "\ndefaultCellBorderColor: " +
 * defaultCellBorderColor; str += "\ndefaultCellBorderType: " +
 * defaultCellBorderType; str += "\n"; str += "\npanelColor: " + panelColor; str +=
 * "\npanelBorderSize: " + panelBorderSize; str += "\npanelBorderColor: " +
 * panelBorderColor; str += "\npanelBorderType: " + panelBorderType; alert(str); }
 */

/*
 * function viewSize(size) { document.getElementById("cellSizeValue").value =
 * size + "px"; }
 */

/*
 * function modify_style(selector, property, value) { var styleSheet =
 * document.styleSheets; var changed = false;
 * 
 * if (!styleSheet.length) { var newStyle = document.createElement("style");
 * newStyle.type = "text/css";
 * document.getElementsByTagName("head")[0].appendChild(newStyle); }
 * 
 * if (!property) property = "cssText"; for (var i = 0, style_len =
 * styleSheet.length; i < style_len; i++) { var rule = styleSheet[i].cssRules ?
 * styleSheet[i].cssRules: styleSheet[i].rules; for (var j = 0, rule_len =
 * rule.length; j < rule_len; j++) { if (rule[j].selectorText.toLowerCase() ==
 * selector.toLowerCase()) { rule[j].style[property] = value; changed = true; } } } /*
 * if (!changed) { var style = document.styleSheets[0]; if (property ==
 * "cssText") var cssText = value; else var cssText = property + ":" + value;
 * 
 * if (style.insertRule) style.insertRule(selector + "{" + cssText + "}",
 * style.cssRules.length); else if (style.addRule) style.addRule(selector,
 * cssText); else return false; } return false; }
 */

// property ~ ie ~ ũ�� ~ ff
// window.screenLeft ~ 0 ~ 0 ~ undefined
// window.screenTop + (window.outerHeight - window.innerHeight) ~ 103NaN ~ 85 ~
// undefined99
// window.screenTop ~ 103 ~ 0 ~ undefined
// window.outerHeight ~ undefined ~ 772 ~ 780
// window.innerHeight ~ undefined ~ 687 ~ 681
// document.body.clientHeight ~ 0 ~ 0 ~ 0
// document.body.clientWidth ~ 1276 ~ 1280 ~ 1280
// window.screenX ~ undefined ~ 0 ~ -4
// window.screenY ~ undefined ~ 0 ~ -4
// window.screen.height ~ 800 ~ 800 ~ 800
// window.screen.width ~ 1280 ~ 1280 ~ 1280
// window.screen.top ~ undefined ~ undefined ~ 0
// window.screen.left ~ undefined ~ undefined ~ 0
// window.screen.availHeight ~ 772 ~ 772 ~ 772
// window.screen.availWidth ~ 1280 ~ 1280 ~ 1280
// document.documentElement.clientWidth ~ 1276 ~ 1280 ~ 1280
// document.documentElement.clientHeight ~ 645 ~ 687 ~ 681
// document.documentElement.scrollLeft ~ 0 ~ 0 ~ 0
// document.documentElement.scrollTop ~ 0 ~ 0 ~ 0
// document.body.clientWidth ~ 1276 ~ 1280 ~ 1280
// document.body.clientHeight ~ 0 ~ 0 ~ 0
// document.body.clientX ~ undefined ~ undefined ~ undefined
// document.body.clientY ~ undefined ~ undefined ~ undefined
// document.body.scrollLeft ~ 0 ~ 0 ~ 0
// document.body.scrollTop ~ 0 ~ 0 ~ 0
// document.workerPanel.scrollTop ~ 0 ~ 0 ~ 0
// document.workerPanel.scrollLeft ~ 0 ~ 0 ~ 0
// document.workerPanel.offsetLeft ~ 20 ~ 20 ~ 20
// document.workerPanel.offsetTop ~ 20 ~ 20 ~ 20
// �۾�ǥ���� ���� ~ 28 ~ 28 ~ 28
// ��� �� ���� ~ 127 ~ 85 ~ 91
